<template>
    <div class="flex-wrapper">
        <div class="navmenu-wrapper">
            <nav-menu></nav-menu>
        </div>
        <div class="vertical-wrapper">
            <navbar></navbar>
            <div class="bench-wrapper">
                <router-view/>
            </div>
        </div>
    </div>
</template>

<script>
    import navbar from "@/components/basicFrame/navbar";
    import navMenu from "@/components/basicFrame/navMenu";

    export default {
        name: "home",
        components: {
            navbar,
            navMenu
        }
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .flex-wrapper {
        display: flex;
        height: 100%;
    }

    .vertical-wrapper {
        width: 100%;
    }

    .navmenu-wrapper {
        height: 100%;
    }

    .bench-wrapper {
        width: 100%;
        height: calc(100% - 50px);
    }

</style>
